import { request } from '../../request/request.js'

// pages/category/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 分类数据
    leftMenuList: [],

    // 右侧商品类表
    rightContent: [],
    // 被点击的左侧菜单
    currentIndex: 0,

    // 接口返回的数据
    Cates: [],


    // 右侧内容的滚动条距离顶部的距离
    screenTop:0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 1.先判断一下本地存储中有没有旧数据
    // 2.没有旧数据 直接发送新请求
    // 3.有旧数据 同时 旧数据没有过期 就使用 本地存储中的旧数据即可
    // this.getCates()


    // 1.获取本地存储数据 （小程序有本地存储）
    const Cates = wx.getStorageSync('cates');
    // 2.判断
    if (!Cates) {
      // 不存在
      this.getCates()

    } else {
      // 有旧数据了 定义过期时间 10s改为5分钟
      if (Date.now() - Cates.time > 1000 * 10) {
        console.log("重新发送请求");
        //  重新发送请求
        this.getCates()
      } else {
        console.log("可以使用旧数据");
        //  可以使用旧数据
        this.Cates = Cates.data;
        // 构造左侧菜单大数据
        // let leftMenuList=this.Cates.map((item)=>{item.cat_name})
        let leftMenuList = this.Cates.map(v => v.cat_name);

        // 构造右侧商品大数据
        let rightContent = this.Cates[0].children;

        this.setData({
          leftMenuList,
          rightContent
        })

      }
    }
  },


  // 获取分类数据
  getCates() {
    request({ url: "categories" }).then(res => {
      this.Cates = res.data.message;

      // 把接口数据存入到本地存储中
      wx.setStorageSync('cates', { time: Date.now(), data: this.Cates })

      // 构造左侧菜单大数据
      // let leftMenuList=this.Cates.map((item)=>{item.cat_name})
      let leftMenuList = this.Cates.map(v => v.cat_name);

      // 构造右侧商品大数据
      let rightContent = this.Cates[0].children;

      this.setData({
        leftMenuList,
        rightContent
      })


    })
  },


  //页面点击事件。点击菜单栏切换对应商品 
  handleItemTap(e) {
    // 1.获取被点击的标题身上的索引
    // 2.给data中的currentIndex赋值就可以了
    // 3.根据不同的索引来渲染右侧的商品内容
    console.log(e);
    const { index } = e.currentTarget.dataset;
    // 构造右侧商品大数据
    let rightContent = this.Cates[index].children;
    this.setData({
      currentIndex: index,
      rightContent,
    // 重新设置 右侧内容区的scroll-view标签的距离顶部的距离
      screenTop:0
    })



  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})